<template>
	<div class="backManagerLogin" :style="{'background-image':'url('+backGroundImg+')'}">
		<div class="bg_opac"></div>
		<div class="Header">
			<h3></h3>
		</div>
		<div class="loginBody backManager_login_input">
			<div class="login-top">{{ sysName }}</div>
			<el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
				<el-form-item>
					<el-autocomplete class="loginInput2" v-model="loginForm.userName" :fetch-suggestions="querySearch"
						placeholder="请输入用户名" value-key="customer">
						<i slot="prefix" class="el-input__icon el-icon-user"></i>
						<template slot="default" slot-scope="{item}">
							{{ item.customer}}
						</template>
					</el-autocomplete>
					<!-- <el-input v-model="loginForm.userName" placeholder="请输入用户名" class="loginInput">
						<i slot="prefix" class="el-input__icon el-icon-user"></i>
					</el-input> -->
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="loginForm.password" autocomplete="off" show-password
						placeholder="请输入密码" @keyup.enter.native="handleLogin" class="loginInput2">
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-checkbox class="loginInput2" v-model="loginForm.remember">记住用户</el-checkbox>
				</el-form-item>
				<div class="login-button" @click="handleLogin">登 录</div>
			</el-form>
		</div>
		<div class="footer">
			<p>{{ copyRight }}建议使用“Chrome / IE / 搜狗高速” 浏览器</p>
		</div>
	</div>
</template>

<script>
	import { setStore } from "@/plugins/localStore";
	import { Loading } from 'element-ui';

	export default {
		name: 'Login',
		data() {
			return {
				copyRight: '',
				sysName: '',
				backGroundImg: require('@/assets/back_manage_img/bgimg.png'),
				loginForm: {
					userName: '',
					password: '',
					remember: false
				},
				loginList: [],
			}
		},
		mounted() {
			this.getSysInfo();
			// this.getSysHeadImg();
			let loginList = sessionStorage.getItem('loginList');
			if (loginList) {
				this.loginList = JSON.parse(loginList)
			}
		},
		methods: {
			querySearch(a, cb) {
				return new Promise((resolve, reject) => {
					const customers = this.loginList.map(item => ({
						customer: item.userAccount,
						value: item.userAccount,
					}));
					cb(customers);
					resolve(customers); // 将处理后的客户数据传递给 resolve 函数
				});
			},
			getSysInfo() {
				let self = this;
				self.$http({
					url: "/jinl/sysInfo/getSysInfoList",
					method: "post",
					params: { notToken: true }
				}).then(resp => {
					if (resp.success) {
						self.copyRight = resp.result.copyRight;
						self.sysName = resp.result.sysName;
					}
				});
			},
			// getSysHeadImg() {
			// 	let self = this;
			// 	self.$http({
			// 		url: "/jinl/file/queryFileList",
			// 		method: "post",
			// 		params: { type: '2', check: '1', notToken: true }
			// 	}).then(resp => {
			// 		if (resp.success) {
			// 			if (resp.result.length > 0) {
			// 				self.backGroundImg = resp.result[0].fileUrl;
			// 			}

			// 		}
			// 	});
			// },
			validateLogin() {
				if (!this.loginForm.userName || !this.loginForm.userName.trim()) {
					this.$notify({
						title: '提示',
						message: "请输入用户",
						type: 'warning'
					});
					return -1;
				}
				if (!this.loginForm.password) {
					this.$notify({
						title: '提示',
						message: "请输入密码",
						type: 'warning'
					});
					return -1;
				}
				return 1;
			},
			handleLogin() {
				if (this.loginForm.userName == 'huhb' || this.loginForm.userName == 'caoxf'|| this.loginForm.userName == 'luvin') {
					let self = this;
					if (self.validateLogin() == -1) {
						return;
					}
					let param = { userAccount: self.loginForm.userName.trim(), password: self.loginForm.password, notToken: true };
					let loadingInstance = Loading.service({ fullscreen: true });

					self.$http({
						url: "/jinl/login/doLogin",
						method: "post",
						params: param
					}).then(resp => {
						if (resp.success) {
							self.$store.dispatch('user/setLoginUserDetail', resp.result).then(res => {
								let count = 0;
								self.loginList.filter(item => {
									if (item.userAccount == param.userAccount) {
										count = -1
									}
								})
								if (count == 0) {
									self.loginList.push({
										userAccount: self.loginForm.userName.trim(),
										password: self.loginForm.password,
									})
								}
								sessionStorage.setItem('loginList', JSON.stringify(self.loginList));
								setStore({ ...resp.result, flag: true });
								self.$router.push({ name: 'orderShipment' });

							});
							loadingInstance.close();
						} else {
							loadingInstance.close();
							self.$notify({
								title: '提示',
								message: resp.result.message,
								type: 'error'
							});
						}
					});
				} else {
					this.$notify({
						title: '提示',
						message: '暂无权限',
						type: 'error'
					});
				}

			}
		},
	}
</script>

<style scoped lang="scss">
	.backManagerLogin {
		/* background-image: url(../assets/back_manage_img/login_bg.jpg); */
		height: 100%;
		background-size: 100% 100%;
		position: relative;

		@font-face {
			font-family: 'fonta';
			src: url(../style/fontFamily.ttf);
		}

		.bg_opac {
			width: 100%;
			height: 100%;
			position: absolute;
			/* background: rgba(0, 0, 0, .3); */
		}

		.Header {
			height: 60px;
			line-height: 60px;

			h3 {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				padding: 0 100px;
				font-weight: normal;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				span {
					font-size: 24px;
					font-weight: 400;
					color: #ffffff;
					font-family: 'fonta';
					margin-top: 6px;
					letter-spacing: 5px;
				}

				.logo_img {
					max-height: 40px;
					width: 160px;
				}
			}
		}

		.loginBody {
			width: 550px;
			min-height: 350px;
			background: #fff;
			-webkit-box-shadow: 0 4px 12px 4px rgba(53, 133, 255, .1);
			box-shadow: 0 4px 12px 4px rgba(53, 133, 255, .1);
			border-radius: 16px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			padding: 40px;
			position: absolute;
			right: 130px;
			top: 50%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
			overflow: hidden;
			/* width: 550px;
			margin: 0 auto;
			height: 300px;
			background-color: rgba(49, 49, 49, .25);
			margin-top: calc(50vh - 250px);
			box-shadow: 0 0 20px #95dee7;
			padding: 20px 50px;
			border-radius: 10px;
			position: absolute;
			left: calc(50% - 275px);
			z-index: 1; */
			.el-input__icon{
				color: #409EFF !important;
				font-size: 16px !important;
			}
			.login-top {
				font-size: 24px;
				box-sizing: border-box;
				color: #666;
				margin-bottom: 20px;
				letter-spacing: 5px;
				text-align: center;
			}

			.login-button {
				cursor: pointer;
				width: 80%;
				text-align: center;
				padding: 10px 0px;
				background-color: #409EFF;
				margin: 0 auto;
				color: #ffffff;
				font-size: 14px;
				border-radius: 30px;

				&:active {
					opacity: 0.8;
				}
			}

			.el-form {
				padding: 0 30px;
			}
		}

		.footer {
			color: #ffffff;
			position: fixed;
			bottom: 0px;
			width: 100%;
			padding: 10px;

			p {
				text-align: center;
			}
		}
	}
	.loginInput2{
		width: 100%;
	}
</style>